<template>
	<div class="lc_wrap">

		<el-row class="abnormal swaqAbnormal">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree @ready="ready" :deviceType='systemInfo.treeType'></lcTree>
					</basic-container>
				</div>
			</el-col>

			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<!--时间选择-->
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item>
							<el-date-picker style="width: 150px;" v-model="query.start" type="date" size="small" placeholder="开始日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
							</el-date-picker>
							&nbsp;至&nbsp;
							<el-date-picker style="width: 150px;" v-model="query.end" type="date" size="small" placeholder="结束日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
							</el-date-picker>
							&nbsp;&nbsp;
						</el-form-item>
							
						<!--预警类型选择-->
						<el-form-item label="类型">
							<el-select size="small" v-model="query.abnormalType" style="width: 150px;">
								<!--<el-option v-for="(item, index) in aliasTypeOption" :key="index" :label="item.dictValue" :value="item.dictKey"></el-option>-->
							</el-select>
						</el-form-item>
						
						<!--状态选择-->
						<el-form-item label="状态">
							<el-select size="small" v-model="query.relieveWay" style="width: 150px;">
								<!--<el-option v-for="(item, index) in statusTypeOption" :key="index" :label="item.dictValue" :value="item.dictKey"></el-option>-->
							</el-select>
						</el-form-item>

						<!--搜索按钮-->
						<el-form-item label="" style="margin-left: 10px;">
							<el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn">搜 索</el-button>
							<el-button type="" size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
						</el-form-item>

					</el-form>
					<avue-crud ref="crud" v-model="form" :option="option" :table-loading="loading" :data="data" :page.sync="page" @refresh-change="refreshChange" @search-change="searchChange" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @search-reset="searchReset">
						<template slot="menuLeft">
							<el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport">导出</el-button>
							<el-button size="small" type="danger" icon="el-icon-edit" :disabled="handleDisabled" @click="toDetails">
								批量处理
							</el-button>
							<el-button type="primary" size="small" plain @click="sendInfo" >发送预警通知</el-button>
						</template>
						<template slot="video" slot-scope="scope">
							  <div @click="infoVisiable=true">
							  	<i class="el-icon-video-play" style="font-size: 20px;"></i>
							  </div>                
						</template>
						<template slot="status" slot-scope="scope">
						    
							<el-link v-if="scope.row.status=='已处理'" type="primary" icon="el-icon-view" 
								style="font-size: 12px" :underline="false" @click="viewAbnormal(scope.row)">查看
							</el-link>
							<el-link v-else type="danger" icon="el-icon-edit" style="font-size: 12px" 
								:underline="false" @click="handleAbnormal(scope.row)">处理
							</el-link>						    
						    
						</template>
					</avue-crud>

					<el-dialog title="处理单" :visible.sync="dialogVisiable" :modal="false" @close="beforeDialogClose">
						<el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules">
							<el-form-item label="处理意见" prop="conclusion">
								<el-input type="textarea" placeholder="请输入处理意见" show-word-limit 
									v-model="dialogForm.conclusion" :rows="4" :resize="false" :disabled="dialogType=='view'"></el-input>
							</el-form-item>
						</el-form>
						<avue-crud ref="handleCrud" :option="handleOption" :table-loading="handleLoading" :data="selectionList">
							<template slot="menu" slot-scope="scope">
								<el-link type="primary" icon="el-icon-view" style="font-size: 12px" :underline="false" @click="info(scope.row)">
									详情
								</el-link>
							</template>
						</avue-crud>
						<div style="display:flex;justify-content:center;" v-if="dialogType=='edit'">
							<el-button size="small" type="primary" @click="onsubmit" :loading="submitLoading">提 交</el-button>
							<el-button size="small" @click="closeDialog">取 消</el-button>
						</div>
					</el-dialog>
           
					<el-dialog title="视频录像" :visible.sync="infoVisiable" :modal="true" :append-to-body="true">
						<img src="/img/bg/bg1.jpg" alt="" width="100%" />
						<span slot="footer" class="dialog-footer">					    
					      <el-button type="primary" @click="infoVisiable = false">确 定</el-button>
					    </span>                  
					</el-dialog>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getAbnormalList } from "@/api/psoa32/wholeProcess";
	import { getToken } from "@/util/auth";
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	import mixmin from '@/config/mixmin'
	import { column2,handlecolumn}  from "@/views/psoa32/wholeProcess/option/column.js"
	export default {
		components: {
			lcTree,
			overlay
		},
		data() {
			return {
				infoVisiable: false,
				abnormalInfoId: "",
				form: {},
				query: {
					abnormalType: '',
					end: '',
					relieveWay: '',
					start: ''
				},
				loading: false,
				selectionList: [],
				option: {
					addBtn: false,
					editBtn: false,
					delBtn: false,
					tip: false,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: true,
					dialogClickModal: false,
					selection: true,
					menu:false,
					column: column2
				},
				data: [],
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
				},
				handleDisabled: true, // 批处理是否禁用
				dialogVisiable: false,
				handleOption: {
					addBtn: false,
					editBtn: false,
					delBtn: false,
					calcHeight: 30,
					tip: false,
					columnBtn: false,
					refreshBtn: false,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					dialogClickModal: false,
					menu: false,					
					viewBtn: false,
					column: handlecolumn
				},
				dialogForm: {
					conclusion: null,
				},
				dialogFormRules: {
					conclusion: [{
						required: true,
						message: '请输入处理意见',
						trigger: 'blur'
					}]
				},
				submitLoading: false,
				dialogType: null, // 查看 || 处理
				siteName: '', // 站点下拉绑定值
				nodeId: null,
				deptInfoName: '',
				deptInfoId: '',
				treeType: null
			}
		},
		mixins: [mixmin],
		mounted() {
			
		},
		watch: {
			dialogVisiable(val) {
				if(!val) this.selectionClear()
			}
		},
		methods: {
			info(row) {
				if(row.type == 1) {
					this.abnormalInfoId = row.id
					this.getLine()
				} else {
					this.$message.warning('仅限预警类型为超标的才可查看详情')
					return false
				}
			},
			handleExport() {
				this.$confirm("是否导出报表数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					let str = `api/squirrel-psoa-hebei/abnormal/export?${
			        this.website.tokenHeader
			        }=${getToken()}&abnormalType=${this.query.abnormalType}&start=${
			        this.query.start}&end=${this.query.end}&relieveWay=${this.query.relieveWay}`
					window.open(str);
				});
			},
			ready(data, treeData) {
				this.treeType = data.nodeType
				this.nodeId = data.key
				this.deptInfoName = data.title
				this.deptInfoId = data.id
				this.page.currentPage = 1
				this.onLoad()
			},
			sendInfo() {
				this.$message.success('发送成功')
			},
			// 搜索清空事件
			searchReset() { 
				this.query={abnormalType: '',end: '',relieveWay: '',start: ''}
				this.page.currentPage = 1;
				this.onLoad();
			},


			closeDialog() {
				this.dialogVisiable = false
				this.submitLoading = false
			},

			beforeDialogClose() {
				// 清空表单
				this.$refs.dialogForm.resetFields()
			},
			onsubmit() {
				// 验证表单
				this.$refs.dialogForm.validate(vaild => {
					if(vaild) {
						this.submitLoading = true
						let ids = this.selectionList.map(item => item.id)
						update({
							ids: ids.join(','),
							conclusion: this.dialogForm.conclusion
						}).then(res => {
							this.submitLoading = false
							if(res.data.success) {
								this.$message.success('操作成功')
								this.dialogVisiable = false
								this.onLoad()
							} else {
								this.$message.success('操作失败')
							}
						})
					}
				})
			},
			toDetails() {
				this.dialogType = 'edit'
				// 筛选数组中的已处理预警
				let handleList = this.selectionList.filter(item => item.status == 1)

				if(handleList.length) { // 如果存在已处理的预警，提醒用户修改
					this.$message.warning('存在已处理预警')
				} else { // 进行批量处理=> 批量处理不显示图例					

					this.dialogVisiable = true
				}
			},
			handleAbnormal(row) {
				// if(!row.endTime) {
					// this.$message.warning('预警没有结束，不能处理')
					// return false
				// }
				this.selectionList = [row]
				this.dialogType = 'edit'
				this.dialogForm.conclusion = null;
				this.dialogVisiable = true
			},
			// 预警单个查看
			viewAbnormal(row) {
				this.selectionList = [row]
				this.dialogType = 'view'   // 控制处理意见是否可输入
				this.dialogForm.conclusion = row.conclusion; // 处理意见字段赋值
				this.dialogVisiable = true
			},
			// 行勾选事件
			selectionChange(list) {
				this.selectionList = list
				this.handleDisabled = this.selectionList.length ? false : true
			},
      // 清除行勾选的方法
			selectionClear() {
				this.selectionList = [];
				this.$refs.crud.toggleSelection();
			},
			searchBtn() {
				this.page.currentPage = 1
				this.onLoad()
			},
			onLoad() {
				this.loading = true;
				let params = Object.assign({}, this.query, {
					current: this.page.currentPage,
					size: this.page.pageSize
				})
				getAbnormalList(params).then(res => {
					this.data = res.data.data.records
					this.page.total = res.data.data.total;
					this.loading = false
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ab_chartsWrap {
		width: 100%;
		height: 300px;
	}
	
	.map {
		width: 100%;
		height: 500px;
	}
	
	.box {
		height: 100%;
		margin-bottom: 0;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
	
	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
		font-size: 14px;
	}
	
	.search-left {
		display: flex;
		height: 33px;
		line-height: 33px;
	}
	
	.search-right {
		display: flex;
	}
	
	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
</style>